<template>
    <div class="divBox">
        <el-card class="box-card">
            <el-form :model="form" label-width="120px">
                <el-row :gutter="24">
                    <el-col :span="12">
                        <el-form-item label="个人简介：">
                            <el-input v-model="form.brief" placeholder="默认名片个人简介"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="24">
                    <el-col :span="12">
                        <el-form-item label="个性标签：">
                            <el-input v-model="inputTags" enter-button="个性标签" style="width: 100%;" placeholder="添加默认个性标签">
                                <el-button slot="append" style="background: #46a6ff; color: #fff; border-radius: 0 4px 4px 0;" @click="addTages">添加</el-button>
                            </el-input>
                            <el-tag v-for="tag in form.tags" :key="tag" closable :type="tag" @close="removeTages(tag)">{{tag}}</el-tag>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="24">
                    <el-col :span="12">
                        <el-form-item label="企业视频：" prop="slider_image">
                            <div class="acea-row">
                                <div v-for="(item,index) in form.enterpriseVideoList" :key="index" class="pictrue" draggable="false">
                                    <img :src="item.image_src">
                                    <i class="el-icon-error btndel" @click="removeVideo(index)" />
                                </div>
                                <div class="upLoadPicBox" @click="addVideo">
                                    <div class="upLoad">
                                        <i class="el-icon-camera cameraIconfont" />
                                    </div>
                                </div>
                            </div>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="24">
                    <el-col :span="12">
                        <el-form-item label="热销商品：" prop="slider_image">
                            <div class="acea-row">
                                <div v-for="(item,index) in form.productList" :key="index" class="pictrue" draggable="false">
                                    <img :src="item.image">
                                    <i class="el-icon-error btndel" @click="removeProduct(index)" />
                                </div>
                                <div class="upLoadPicBox" @click="addProduct">
                                    <div class="upLoad">
                                        <i class="el-icon-camera cameraIconfont" />
                                    </div>
                                </div>
                            </div>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="24">
                    <el-col :span="12">
                        <el-form-item label="推荐热文：" prop="slider_image">
                            <div class="acea-row">
                                <div v-for="(item,index) in form.hotText" :key="index" class="pictrue" draggable="false">
                                    <img :src="item.image_input">
                                    <i class="el-icon-error btndel" @click="removeText(index)" />
                                </div>
                                <div class="upLoadPicBox" @click="addText">
                                    <div class="upLoad">
                                        <i class="el-icon-camera cameraIconfont" />
                                    </div>
                                </div>
                            </div>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-button type="primary" @click="submit">提交</el-button>
            </el-form>
            <!--选择商品-->
            <goods-list ref="goodsList" @getProduct="getProduct" :ids="form.productListIds"/>
            <!-- 选择视频 -->
            <videoList ref="videoList" @getProduct="getVideo" :ids="form.enterpriseVideoListIds"/>
            <!-- 选择文章 -->
            <hotTextList ref="hotTextList" @getProduct="getHotText" :ids="form.hotTextIds"/>
        </el-card>
    </div>
</template>
<script>
    import goodsList from "./goodsList"
    import videoList from "./videoList.vue"
    import hotTextList from "./hotTextList.vue"
    import {setCard,getCompanyInfo } from "@/api/buss"
    import { productLstApi } from '@/api/product'
    import {
    getVideoList,
    } from "@/api/buss"
    import {
    articleLstApi
  } from '@/api/cms'
    export default {
        data(){
            return {
                // 个性标签需要添加内容
                inputTags:"",
                form:{
                    brief:"",
                    tags:[],
                    productList:[],
                    productListIds:[],
                    enterpriseVideoList:[],
                    enterpriseVideoListIds:[],
                    hotText:[],
                    hotTextIds:[],
                }
            }
        },
        components:{
            goodsList,
            videoList,
            hotTextList
        },
        mounted(){
            getCompanyInfo().then(res=>{
                this.form.brief = res.data.set_up.company_field
                this.form.tags = JSON.parse(res.data.set_up.autograph)
                var productList = JSON.parse(res.data.set_up.product_ids)
                productLstApi({
                    limit:9999
                }).then(res=>{
                    for(var j=0;j<productList.length;j++){
                        for(var i=0;i<res.data.list.length;i++){
                            if(productList[j]==res.data.list[i].product_id){
                                this.form.productList.push(res.data.list[i])
                                break;
                            }
                        }
                    }
                })
                this.form.productListIds = JSON.parse(res.data.set_up.product_ids)
                var enterpriseVideoList = JSON.parse(res.data.set_up.video_ids)
                getVideoList({
                    limit:9999
                }).then(res=>{
                    for(var j=0;j<enterpriseVideoList.length;j++){
                        for(var i=0;i<res.data.list.length;i++){
                            if(enterpriseVideoList[j]==res.data.list[i].id){
                                this.form.enterpriseVideoList.push(res.data.list[i])
                                break;
                            }
                        }
                    }
                })
                this.form.enterpriseVideoListIds = JSON.parse(res.data.set_up.video_ids)
                var hotText = JSON.parse(res.data.set_up.article_ids)
                articleLstApi({
                    limit:9999
                }).then(res=>{
                    for(var j=0;j<hotText.length;j++){
                        for(var i=0;i<res.data.list.length;i++){
                            if(hotText[j]==res.data.list[i].article_id){
                                this.form.hotText.push(res.data.list[i])
                                break;
                            }
                        }
                    }
                })
                this.form.hotTextIds = JSON.parse(res.data.set_up.article_ids)
            })
           
        },
        methods:{
            // 提交
            submit(){
                var product_ids = [];
                for(var i=0;i<this.form.productList.length;i++){
                    product_ids.push(this.form.productList[i].product_id)
                }
                var video_ids = [];
                for(var i=0;i<this.form.enterpriseVideoList.length;i++){
                    video_ids.push(this.form.enterpriseVideoList[i].id)
                }
                var article_ids = [];
                for(var i=0;i<this.form.hotText.length;i++){
                    article_ids.push(this.form.hotText[i].article_id)
                }
                setCard({
                    company_field:this.form.brief,
                    autograph:JSON.stringify(this.form.tags),
                    product_ids:JSON.stringify(product_ids),
                    video_ids:JSON.stringify(video_ids),
                    article_ids:JSON.stringify(article_ids),
                }).then(res=>{
                    this.$message.success(res.message)
                })
            },
            // 添加视频
            addVideo(){
                this.$refs.videoList.dialogVisible = true
            },
            // 选中返回视频
            getVideo(data){
                this.form.enterpriseVideoList.push(data)
                this.form.enterpriseVideoListIds.push(data.id)
            },
            // 删除视频
            removeVideo(i){
                this.form.enterpriseVideoList.splice(i, 1)
                this.form.enterpriseVideoListIds.splice(i, 1)
            },
            // 添加热文
            addText(){
                this.$refs.hotTextList.dialogVisible = true
            },
            // 选中返回文章
            getHotText(data){
                this.form.hotText.push(data)
                this.form.hotTextIds.push(data.article_id)
            },
            // 删除热文
            removeText(i){
                this.form.hotText.splice(i, 1)
                this.form.hotTextIds.splice(i, 1)
            },
            // 添加热销商品
            addProduct(){
                this.$refs.goodsList.dialogVisible = true
            },
            // 删除商品
            removeProduct(i){
                this.form.productList.splice(i, 1)
                this.form.productListIds.splice(i, 1)
            },
            // 选中返回商品
            getProduct(data) {
                this.form.productList.push(data)
                this.form.productListIds.push(data.product_id)
            },
            // 添加个性标签
            addTages(){
                if(!this.inputTags){
                    return this.$message.warning('请输入标签内容')
                }else{
                    this.form.tags.push(this.inputTags)
                    this.inputTags=''
                }
            },
            // 删除个性标签
            removeTages(tag){
                this.form.tags.splice(this.form.tags.indexOf(tag), 1);
            }
        }
    }
</script>
<style scoped lang="scss">
    /deep/ .el-tag--medium{
        margin:0 10px 10px 0 ;
    }
    .pictrue {
        width: 60px;
        height: 60px;
        border: 1px dotted rgba(0, 0, 0, 0.1);
        margin-right: 10px;
        position: relative;
        cursor: pointer;

        img {
            width: 100%;
            height: 100%;
        }
        .btndel {
            position: absolute;
            z-index: 1;
            width: 20px !important;
            height: 20px !important;
            left: 46px;
            top: -4px;
        }
    }
</style>